<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-07-23 23:51:27
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-14 20:38:34
 * @version: 1.2.3
 * @Description: 
-->
<script lang="ts" setup>
import { IRoutes, IMeta } from "@/types/login/index.d";
import { isExternal } from "@/utils/index";
import {SvgIcon} from '../../../SvgIcon'
defineProps({
    menuList: { type: Array<IRoutes<IMeta>>, required: true },
});

</script>
<template>
    <template v-for="(item, index) in menuList">
        <!-- 有次级菜单的,则展开子选项-->
        <el-sub-menu  v-if="item.children && item.children.length >0" :index="item.path">
            <template #title>
                <SvgIcon :icon="item.meta.icon" size="22px" />
                <span style="padding-left: 10px">{{ item.meta.title }}</span>
            </template>
            <!-- 递归,实现无限级展开 -->
            <menu-item  :menuList="item.children"  />
        </el-sub-menu>

        <!-- 没有次级菜单的 -->
        <el-menu-item v-if="item.children != null && item.children.length == 0"
            :index="isExternal(item.path) ? '' : item.path" :key="index">
            <SvgIcon :icon="item.meta.icon" size="22px" />
            <template #title>
                <!-- if 为外部链接则进行打开新的页面跳转 -->
                <a v-if="isExternal(item.path)" :href="item.path" target="_blank">
                    <span style="padding-left: 10px">{{ item.meta.title }}</span>
                </a>
                <!-- 否则 -->
                <span style="padding-left: 10px" v-else>{{ item.meta.title }}</span>
            </template>
        </el-menu-item>
    </template>
</template>
